<template>
  <div class="app-container" style="margin-top:0;padding:0">
    <el-popover
      v-model="visible"
      popper-class="school-popper"
      placement="bottom"
      trigger="click">
      <div class="school-div">
         <div class="school-top" style="position: relative">
           <img src="https://pic.moresu.com/Fi8tfn_GVx1stWdv3VK5RvrrkxmJ" style="margin-right:10px;"/>塑盟学院
           <div style="color:#1a66fc;font-size: 12px;font-weight: 400;cursor: pointer;position: absolute;right:0;" @click="toPage('/bms/filesSee')">查看更多》</div>
         </div>
         <div class="school-con">
            <div class="school-item"  v-for="item in fileList" :key="item.articleId" @click="openFile(item)">
               <img src="https://pic.moresu.com/FqFOhRem1BA3KzZOEeLaS_XwUfmz" style="position: absolute;right:-4px;top:-10px" v-if="item.isNew"/>
               <div class="school-item-name">{{ item.articleTitle }}</div>
               <div class="school-item-time">{{item.createTime}}</div>
            </div>
         </div>
      </div>
      <div style="margin-top:-46px;z-index: 2;position: absolute;right:20px;cursor: pointer" slot="reference">
        <img src="https://pic.moresu.com/Fs81DcKia272afGEhGX9uAn9MQgJ"/>
      </div>
    </el-popover>


    <div :style="{'height':`${style0.height*scale.y0}px`}" style="overflow: hidden" v-if="topData">
      <div class="index-section" :style="{'width':`${style0.width}px`,'height':`${style0.height}px`,'transform':`${style0.transform}`}">
        <div class="process-div" >
          <div class="sale-process">
            <div class="process-name">销售<br/>订单流</div>
            <div v-for="(item,index) in topData.orderLinkList" :key="item.linkName" style="display: flex;justify-content: flex-start;align-items: center">
              <div class="process-sale-item" :class="{'disabled':item.linkUrl == ''}" @click="toPage(item.linkUrl)">
                <div class="num" v-if="item.linkNum > 0">{{ item.linkNum }}</div>
                {{ item.linkName }}
              </div>
              <img src="https://pic.moresu.com/FvwGmKqI9ikjyvKROEka2ymnHbik" style="width:25px;margin-left:25px;" v-if="index < topData.orderLinkList.length-1"/>
            </div>
          </div>
          <div class="layer-blue" style="margin-left:60px;">
            <img src="https://pic.moresu.com/FrrGBIyEdrmJqFYDQLfDAZFB7Kj8"/>
          </div>
          <div class="pums-process">
            <img src="https://pic.moresu.com/Ft-V6pGW_q80eg38XCOgNNVhVRLd"/>
            <div class="process-name">采购<br/>订单流</div>
            <div v-for="(item,index) in topData.purchaseLinkList" :key="item.linkName" style="display: flex;justify-content: flex-start;align-items: center">
              <div class="process-pums-item" :class="{'disabled':item.linkUrl == ''}" @click="toPage(item.linkUrl)">
                <div class="num" v-if="item.linkNum > 0">{{ item.linkNum }}</div>
                {{ item.linkName }}
              </div>
              <img src="https://pic.moresu.com/Ftv3IOKN7EJvf6c7BrWeKfKWitAT" style="width:25px;margin-left:12px;" v-if="index < topData.purchaseLinkList.length-1"/>
            </div>

            <div class="process-name">采购<br/>排货流</div>
            <div v-for="(item,index) in topData.logisticLinkList" :key="item.linkName" style="display: flex;justify-content: flex-start;align-items: center">
              <div class="process-pums-item" :class="{'disabled':item.linkUrl == ''}" @click="toPage(item.linkUrl)">
                <div class="num" v-if="item.linkNum > 0">{{ item.linkNum }}</div>
                {{ item.linkName }}
              </div>
              <img src="https://pic.moresu.com/Ftv3IOKN7EJvf6c7BrWeKfKWitAT" style="width:25px;margin-left:12px;" v-if="index < topData.logisticLinkList.length-1"/>
            </div>
            <img src="https://pic.moresu.com/FrEeuYb2GQds-PSv0rRp6uaS4mec"/>
          </div>
          <div class="layer-yellow">
            <img src="https://pic.moresu.com/FvhSG2zuCCkgIBgswHont25qZeeQ"/>
          </div>
        </div>
      </div>
    </div>


     <div class="data-section" v-if="listQuery1.tab">
        <div class="data-block">
           <div class="data-top-div">
             <div class="data-top-left">
               <div class="data-top-item" :class="{'choose':listQuery1.tab == 'my'}" @click="changeTab('my')" v-if="myDeskData">我的数据</div>
               <div class="data-top-item" :class="{'choose':listQuery1.tab == 'department'}" @click="changeTab('department')" v-if="departmentDeskData">部门数据</div>
               <div class="data-top-item" :class="{'choose':listQuery1.tab == 'all'}" @click="changeTab('all')" v-if="allDeskData">全部数据</div>
             </div>
             <div style="width:210px;">
               <el-cascader
                 @change="getMid"
                 v-if="listQuery1.tab !='my'"
                 size="mini"
                 collapse-tags
                 :show-all-levels="false"
                 v-model="listQuery1.userIds"
                 placeholder="请选择部门/事业部/人员"
                 :options="userList"
                 :props="props"></el-cascader>
             </div>
           </div>
           <div class="data-mid-div">
                <el-row :gutter="28">
                   <el-col :span="midData.length ==3 ? 8 : 12" v-for="(item,index) in midData" :key="item.name">
                       <div class="data-min-item" style="min-height:200px;">
                         <div class="data-min-title" :style="{background: index == 1 ? 'url(https://pic.moresu.com/FjUrp3GcGOGEeMTSv5feGSLJYIV-)' : index == 2 ? 'url(https://pic.moresu.com/FrhBUiuHFmF8OdLmgqH6UjxFmgic)' : 'url(https://pic.moresu.com/FkKtMRYDP1QhTjeOt5l1oSl05qjS)'}">{{item.name}}</div>
                         <el-row>
                           <el-col :span="midData.length ==3 ? 12 : 8" class="min-item-div" v-for="(ee,ii) in item.list" :key="ee.name" :class="{'nolink':ee.link == ''}" @click="toPage(ee.link)">
                             <div class="min-item-name" @click="toPage(ee.link)">{{ ee.name }}</div>
                             <div class="min-item-num" @click="toPage(ee.link)">{{ ee.num }}<span style="font-size: 12px">{{ ee.unit }}</span></div>
                           </el-col>
                         </el-row>
                       </div>
                   </el-col>
                </el-row>
                <div class="data-mid-bottom">
                  改进意见反馈:孙君涛<span style="padding-left: 15px">联系电话:18724061828</span>
                </div>
           </div>

        </div>
     </div>

    <!-- 寄语 -->
    <el-dialog
      custom-class="jyClass"
      top="0px"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="jyShow"
      :width="jyWidth+'px'">
        <div class="jyShow-div"  :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}">
             <div class="jy-title">致全体塑盟人的一封信</div>
             <div class="jy-con">
                <div class="underline-each-line" style="text-indent: 0;">各位塑盟的同事：</div>
                <div class="underline-each-line">
                  每个有雄心壮志的团队都非常重视组织建设和人才培训，人力资源是组织的第一工程。
                </div>
                <div class="underline-each-line">
                  塑盟2016年成立时，大家热烈讨论公司和团队的未来规划，曾立下宏大愿景。这些年虽取得了一些成绩，但与规划相差甚大，主要原因是我对行业未来的预判、战略和实施策略有许多不足，虽然我在上学时和工作以后有做连锁商业和平台的规划，但更多只是想法和浅层实践。另一方面，组织能力和人才投入的不足，让宏大愿景看上去更多是在天上飞，没有成为指引团队的方向，组织愿景是团队所有人愿景的总和。而比愿景更重要的，是团队的使命，也就是我们能为客户、合作伙伴乃至这个世界创造哪些价值？在团队讨论最新的公司使命时，大家也更为务实，使命定为“快速匹配最合适的货源”。
                </div>
                <div class="underline-each-line">
                  公司曾经有连续多年的业绩倍增，也经历过起伏，再看最初的规划，有许多不切实际和过于理想化的部分，加上行业与大环境也发生了巨大变化，更需要我们通过一步步的实践来验证过去的规划。在这个过程中，唯一不变的，就是我和一些同事还抱有初心、相信最初的愿景终会实现。所以每次看到无论经历多少曲折，依然坚定最初信念的人和事，总会让我有热泪盈眶的感觉。
                </div>
               <div class="underline-each-line">
                 除了高远的愿景和坚定的信念，我们也需要更务实的经营理念。真正以客户为中心，摒弃产品思维过重的工作习惯。重视客户体验，把客户所有的问题都当作是我的问题，把自己当作解决客户需求的代理人甚至是监护人的思维。
               </div>
               <div class="underline-each-line">
                 我们一直致力于打造业务数字化、标准化和可复制，容易复制的生意就会是大生意，复制首先是把做对的事萃取出标准流程，把过去做错的事形成案例和操作提醒。重视赋能团队，随着每个人的成长和更多优秀人才的加入，我相信，我们离最初的成功已经走完了80%的路程。一群志同道合的人，一定可以成就一番伟大的事业！
               </div>
               <div class="underline-each-line" style="text-align: right;margin-top:20px;">
                 龚东卫<br/>2025年9月26日
               </div>
             </div>
             <div class="cs-btn-div">
                <el-button @click="handleCloseJy" class="cs-button">点击查收</el-button>
             </div>
        </div>



    </el-dialog>

  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {saleUserList,quickLinkList,myData,topArticleList} from '@/api/data.js'
  import store from '@/store';
  const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  tab:'',
  userIds:[]
};
  export default {
    name: 'home',
    data() {
      return {
        roles:store.getters.roles ? store.getters.roles : [],
        jyShow:false,
        jyWidth:0,
        style: {
          width: "1587",
          height: "2239",
          transform: "scaleY(1) scaleX(1) translate(0%, 0%)"
        },
        style0: {
          width: "1719",
          height: "375",
          transform: "scaleY(1) scaleX(1) translate(0%, 0%)"
        },
        props:{multiple: true,label:'value',value:'label',emitPath:false},
        userList:[],
        listQuery1: JSON.parse(JSON.stringify(defaultListQuery)),
        scale:{
          x1:1,
          y1:1,
          x0:1,
          y0:1
        },
        topData:null,
        midData:[],
        fileList:[],
        visible:false
      }
    },
    filters: {


    },

    mounted() {
      if(this.myDeskData){
        this.listQuery1.tab = 'my'
      }else if(this.departmentDeskData){
        this.listQuery1.tab = 'department'
      }else if(this.allDeskData){
        this.listQuery1.tab = 'all'
      }
      this.getUserList()
      this.setScale();
      this.getTop();
      this.getFileList();
      if(this.listQuery1.tab){
        this.getMid()
      }

      window.addEventListener('resize', this.setScale);
    },
    computed: {
      ...mapGetters([
        'sidebar',
      ]),
      myDeskData() {
        if(this.roles.indexOf("myDeskData") != -1){
          return true
        }else{
          return false
        }
      },
      departmentDeskData() {
        if(this.roles.indexOf("departmentDeskData") != -1){
          return true
        }else{
          return false
        }
      },
      allDeskData() {
        if(this.roles.indexOf("allDeskData") != -1){
          return true
        }else{
          return false
        }
      },
    },
    watch:{
      'sidebar.opened'(){
        this.setScale();
      },
    },
    components:{

    },

  methods: {
    openFile(item){
      this.visible = false
      if(item.articleId == 52){
        this.jyShow = true
      }else{
        let typeArray = item.articleFile.split(".");
        let type = typeArray[typeArray.length-1];
        if(type == 'pdf'){
          window.open(item.articleFile)
        }else{
          window.open("https://view.officeapps.live.com/op/view.aspx?src="+item.articleFile)
        }
      }
    },
    getFileList(){
      topArticleList().then((res)=>{
        this.fileList = res.list;
        this.jyShow = res.isShow ?  true : false
      })
    },
    toPage(url){
      if(url){
        let routeData = this.$router.resolve({path:url});
        window.open(routeData.href);
      }
    },
    changeTab(key){
      this.listQuery1.tab = key;
      this.getMid()
    },
    getTop(){
      quickLinkList().then((res)=>{
        this.topData = res
      })
    },
    getMid(){
      myData(this.listQuery1).then((res)=>{
        this.midData = res
      })
    },

    getUserList(){
      saleUserList({isHasPurchase:1}).then((res)=>{
        this.userList = res
      })
    },
      handleCloseJy(){
          this.jyShow = false
      },
      getScale() {
        this.jyWidth = window.innerHeight*0.71
        const h = window.innerHeight / this.style.height;
        let w1 = this.sidebar.opened ? 180 : 36
        const w = (window.innerWidth - w1) / this.style0.width;
        return {x1:h,y1:h,x0:w,y0:w};
      },
      setScale() {
        this.scale = this.getScale();
        this.style.transform = "scaleY(" + this.scale.y1 + ") scaleX(" + this.scale.x1 + ") translate(0%, 0%)";
        this.style0.transform = "scaleY(" + this.scale.y0 + ") scaleX(" + this.scale.x0 + ") translate(0%, 0%)";
      },

    }
  }
</script>
<style lang="scss">
.el-popover.school-popper{
  border:0;
  background: none;
  padding:0
}
.school-div{
  background: url("https://pic.moresu.com/FtIXvoyyH8PoC6jW4IusbKJ305Zs")  #e6ebfa no-repeat bottom left;
  width:333px;
  border-radius: 8px;
  border:2px solid #fff;
  padding:10px;
  .school-top{
    font-size: 14px;
    font-weight: bold;
    color:#000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height:42px;
    line-height: 42px;
    border-bottom: 1px solid #ced2e2;
  }
  .school-con{
    padding-top:20px;
    .school-item{
      background: rgba(255,255,255,0.4);
      border-radius: 4px;
      box-shadow: 0 5px 5px rgba(0,0,0,0.07);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0 10px;
      height:44px;
      line-height: 44px;
      margin-bottom:12px;
      position: relative;
      cursor: pointer;
      .school-item-name{
        font-size:14px;
        color:#000;
      }
      .school-item-time{
        font-size:14px;
        color:#999
      }
    }
  }
}
.index-section{
  transform-origin: 0 0;
  background: url("https://pic.moresu.com/FolWssOubq7lBaLmeb7Kb6cpDSJ9") no-repeat;
  background-size: cover;
  padding-left:28px;
  .process-div{
      .sale-process{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
        padding: 32px 301px 0 156px;
        .process-name{
          padding-top: 20px;
          line-height: 22px;
          text-align: center;
          font-size: 14px;
          color:#1a66fc;
          width:67px;
          height:90px;
          border-radius: 6px;
          background: linear-gradient(to bottom, #e7f1fb, #c3d6f4);
          border:2px solid #fff;
          box-shadow: 0 0 13px rgba(2,24,68,0.37);
          font-weight: bold;
        }
        .process-sale-item{
          width:108px;
          height:35px;
          border-radius: 20px;
          background: linear-gradient(to bottom, #3e87fe, #1460fc);
          border:2px solid #fff;
          box-shadow: 0 0 10px rgba(2,24,68,0.37);
          color:#fff;
          text-align: center;
          line-height: 31px;
          font-size: 14px;
          font-weight: bold;
          position: relative;
          cursor: pointer;
          .num{
            background: #ff0000;
            width:24px;
            height:24px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color:#fff;
            border:2px solid #fff;
            position: absolute;
            right: -10px;
            top:-10px;
          }
        }
        .process-sale-item.disabled{
          background: linear-gradient(to bottom, #d2d2d2, #f0f0f0);
          color:#909090;
          cursor: not-allowed;
          .num{
            background: #eee;
            color:#aaa
          }
        }
        .process-sale-item.disabled:hover{
          background: linear-gradient(to bottom, #d2d2d2, #f0f0f0);
          box-shadow: 0 0 10px rgba(2,24,68,0.37);
        }

        .process-sale-item:hover{
          background: linear-gradient(to bottom, #1460fc, #3e87fe);
          box-shadow: 0 0 10px rgba(2,24,68,0.8);
        }
      }
      .layer-blue{
          margin-top: -18px;
          z-index: 0;
          position: relative;
      }
      .pums-process{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
        padding:5px 185px 0 37px;
        .process-name{
          padding-top: 20px;
          line-height: 22px;
          text-align: center;
          font-size: 14px;
          color:#e18a12;
          width:67px;
          height:90px;
          border-radius: 6px;
          background: linear-gradient(to bottom, #fbf8e7, #f4e8c5);
          border:2px solid #fff;
          box-shadow: 0 0 13px rgba(2,24,68,0.37);
          font-weight: bold;
        }
        .process-pums-item{
          width:138px;
          height:35px;
          border-radius: 20px;
          background: linear-gradient(to bottom, #fb9100, #f6ad45);
          border:2px solid #fff;
          box-shadow: 0 0 10px rgba(2,24,68,0.37);
          color:#fff;
          text-align: center;
          line-height: 31px;
          font-size: 14px;
          font-weight: bold;
          position: relative;
          cursor: pointer;
          .num{
            background: #ff0000;
            width:24px;
            height:24px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color:#fff;
            border:2px solid #fff;
            position: absolute;
            right: -10px;
            top:-10px;
          }
        }
        .process-pums-item:hover{
          background: linear-gradient(to bottom, #f6ad45, #fb9100);
          box-shadow: 0 0 10px rgba(2,24,68,0.8);
        }
        .process-pums-item.disabled{
          background: linear-gradient(to bottom, #d2d2d2, #f0f0f0);
          color:#909090;
          cursor: not-allowed;
          .num{
            background: #eee;
            color:#aaa
          }
        }
        .process-pums-item.disabled:hover{
          background: linear-gradient(to bottom, #d2d2d2, #f0f0f0);
          box-shadow: 0 0 10px rgba(2,24,68,0.37);
        }
      }
      .layer-yellow{
        margin-top: -18px;
        z-index: 0;
        position: relative;
      }
  }
  .data-summary-div{
    background: linear-gradient(to bottom, #f8faff, #ffffff);
  }
}
 .indexBreadcrumbStyle{
  list-style: none;
  display: flex;
  padding: 0px;
  .navigationStyle{
    padding:16px 30px;
    margin-right: 20px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    background-color: #409eff;
    font-size: 14px;
  }
  .navigationStyle:hover{
    cursor: pointer;
    background-color: #fc5531;
  }
 }
 .data-section{
   background: linear-gradient(to bottom, #f8faff, #ffffff);
   padding:0 20px;
   .data-block{
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 0 16px rgba(0,0,0,0.18);
     margin-top:-26px;
     position: relative;
     overflow: hidden;
     margin-bottom: 20px;
     .data-top-div{
       height:56px;
       border-bottom: 1px solid #a0acd8;
       position: relative;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       .data-top-left{
         display: flex;
         justify-content: flex-start;
         align-items: center;
         flex:1;
         .data-top-item{
           font-size: 14px;
           color:#3c6ede;
           cursor: pointer;
           padding:0 10px;
           margin-left:28px;
           line-height: 40px;
           padding-top: 9px;
         }
         .data-top-item.choose{
           font-weight: bold;
           border-bottom: 3px solid #0052d9;
           padding-top: 13px;
         }
       }
     }
     .data-top-div:after{
       content: ' ';
       display: block;
       background: linear-gradient(to bottom, #cedaf6 0%, #ffffff 80%);
       width:100%;
       height:20px;
       position: absolute;
       bottom: -21px;
     }
     .data-mid-div{
       padding:20px 28px 0 28px;
       .data-min-item{
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 0 16px rgba(0,0,0,0.18);
         padding-top: 20px;
         position: relative;
         .data-min-title{
           font-size: 15px;
           font-weight: bold;
           color:#fff;
           width:104px;
           height:35px;
           text-align: center;
           background: url("https://pic.moresu.com/FkKtMRYDP1QhTjeOt5l1oSl05qjS") no-repeat;
           position: absolute;
           top:-10px;
           padding-top: 12px;
         }
         .min-item-div{
           height:60px;
           border-bottom: 1px solid #e9ecf1;
           padding:0 26px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           cursor: pointer;
           .min-item-name{
             font-size: 12px;
             color:#4b5b76;
             width:90px;
             background: url("https://pic.moresu.com/FoVcBw39_jyYKZHDFiOAUtYs4NaB") no-repeat center right;
           }
           .min-item-num{
             font-size: 18px;
             color:#0064f2;
             text-decoration: underline;
           }
         }
         .min-item-div.nolink{
           cursor: default;
           .min-item-num{
             text-decoration: none;
             color:#000
           }
         }
       }
       .data-mid-bottom{
         margin-top:20px;
         text-align: right;
         color:#fff;
         font-size: 12px;
         padding-right:20px;
         background: url("https://pic.moresu.com/FvzO88qdKaIpQ4jb0lIMwqWGlJwE") no-repeat bottom right;
         height:35px;
         line-height: 35px;
         margin-right: -28px;
        }
     }
   }
 }
 .el-dialog.jyClass{
   height:100%;
   background: none;
 }
 .jyClass{
   .el-dialog__header{
     display: none;
   }
   .el-dialog__body{
     padding:0;
     height:100%;
     background: none;
   }
   .jyShow-div{
     height:100%;
     background: url("https://pic.moresu.com/FkEcIToZLiaJO-MEtbj4g6vTbvWv") no-repeat center;
     background-size: contain;
     transform-origin: 0 0;
     .jy-title {
       color: #59658d;
       font-size: 72px;
       padding-top: 154px;
       text-align: center;
       line-height: 175px;
     }
     .jy-con{
       margin-top:90px;
       padding:0 220px;
       color:#59658d;
       font-size: 36px;
       overflow-y: auto;
       height: calc(100% - 700px);
       .underline-each-line {
         line-height: 70px;
         text-indent: 2ch;
         margin-bottom: 20px;
       }
     }
     .cs-btn-div{
       text-align: center;
       margin-top: 50px;
       .cs-button{
         width:420px;
         height:120px;
         border-radius: 80px;
         background: linear-gradient(to top, #f6ad45, #fb9100);
         color:#fff;
         font-size:50px;
         border:8px solid #fff;
         letter-spacing: 17px;
       }
       .cs-button:hover{
         background: linear-gradient(to bottom, #f6ad45, #fb9100);
         box-shadow: 0 0 16px rgba(0,0,0,0.4);
       }
     }

   }
 }

</style>
